<template>
  <div class="stuInfo">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
             class="demo-ruleForm">
      <el-row style="margin-top: 20px">
        <el-col :offset="2" :span="9">
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="ruleForm.name" :disabled="true" clearable></el-input>
          </el-form-item>
          <el-form-item label="身份证号：" prop="identityCard">
            <el-input v-model="ruleForm.identityCard" :disabled="true" clearable></el-input>
          </el-form-item>
          <el-form-item label="出生日期：" prop="birthday">
            <el-date-picker
              style="width: 100%;"
              type="date"
              v-model="ruleForm.birthday"
              value-format="yyyy-MM-dd"
              format="yyyy 年 MM 月 dd 日"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="学院：" prop="college">
            <el-select v-model="ruleForm.college" placeholder="请选择院系" style="width: 100%;"
                       @change="selectCollege">
              <div v-for="o in college">
                <el-option :key="o.colId" :label="o.colname" :value="o.colId"></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="QQ：" prop="qq">
            <el-input v-model="ruleForm.qq" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="9">
          <el-form-item label="学号：" prop="studentId">
            <el-input v-model="ruleForm.studentId" :disabled="true" clearable></el-input>
          </el-form-item>
          <el-form-item label="性别：" prop="sex">
            <el-input v-model="ruleForm.sex" clearable :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="联系电话：" prop="phone">
            <el-input v-model="ruleForm.phone" clearable></el-input>
          </el-form-item>
          <el-form-item label="班级：" prop="clazzId">
            <el-select v-model="ruleForm.clazzId" placeholder="请输入选择班级" style="width: 100%;"
                       @change="selectClass">
              <el-option v-for="os in classes" :key="os.clazzName" :label="os.clazzName"
                         :value="os.clazzId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email">
            <el-input v-model="ruleForm.email" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="19" :offset="2">
          <el-form-item label="备注：">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 4}"
              placeholder="请输入内容"
              v-model="ruleForm.remarks">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="H_V_center">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          </el-form-item>
        </el-col>
        <el-col :offset="3" :span="7" class="H_V_center">
          <el-form-item>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      //姓名
      var checkname = (rule, value, callback) => {
        return callback();
      };
      //身份证号
      var checkidentityCard = (rule, value, callback) => {
        return callback();
      };
      // 性别
      var checkSex = (rule, value, callback) => {
        return callback();
      };
      // 学号
      var checkstudentId = (rule, value, callback) => {
        return callback();
      };


      // 出生日期
      var checkBirthday = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请选择日期'));
        }

        return callback();
      };
      // 电话
      var checkPhone = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('电话不能为空'));
        } else {
          if (value !== '') {
            var reg = /^1[3456789]\d{9}$/;
            if (!reg.test(value)) {
              return callback(new Error('请输入有效的手机号码'));
            }
          }
          return callback();
        }
      };
      // 班级
      var checkclazzId = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请选择班级'));
        }

        return callback();
      };
      // 学院
      var checkCollege = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请选择学院'));
        }

        return callback();
      };
      // QQ
      var checkQQ = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('QQ不能为空'));
        }

        return callback();
      };
      // 邮箱
      var checkemail = (rule, value, callback) => {

        if (value === '' || value === null || value === undefined) {
          return callback();
        } else {
          if (value !== '') {
            var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if (!reg.test(value)) {
              return callback(new Error('请输入有效的邮箱'));
            }
          }
          return callback();
        }
      };

//修改密码

      return {
        i: 0,


        remarks: '',
        college: [],
        classes: [],

        ruleForm: {
          id: '',
          name: 'TYH',
          identityCard: '510************666',
          birthday: '',
          clazzId: '',
          phone: '',
          qq: '',
          studentId: '201761021203093',
          sex: '男',
          college: '',
          remarks:"",
          email: '',
        },
        rules: {
          name: [{validator: checkname, trigger: 'blur'}],
          identityCard: [{validator: checkidentityCard, trigger: 'blur'}],
          birthday: [{validator: checkBirthday, trigger: 'blur'}],
          clazzId: [{validator: checkclazzId, trigger: 'blur'}],
          qq: [{validator: checkQQ, trigger: 'blur'}],
          studentId: [{validator: checkstudentId, trigger: 'blur'}],
          sex: [{validator: checkSex, trigger: 'blur'}],
          college: [{validator: checkCollege, trigger: 'blur'}],
          email: [{validator: checkemail, trigger: 'blur'}],
          phone: [{validator: checkPhone, trigger: 'blur'}],
        }

      };
    },
    computed: {},
    methods: {
      submitForm(ruleForm) { //保存
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            var self = this;
            this.$http.put(this.URL.api + "user/stuUpdateInfo", this.ruleForm)
              .then(response => {
                  if (response.data.flag && response.data.code === 200) {
                    self.$message.success("修改成功");
                    self.UserInfo.setUserInfo(response.data.data)


                  }
                },
              );

          }
        });
      },
      resetForm(ruleForm) {
        this.$refs[ruleForm].resetFields();
        this.remarks = '';
      },

      selectClass() {
        //选择班级回调方法
      },
      selectCollege(val) {
        //选择班级回调方法


      },


    },
    mounted: function () {
      //mounted　表示这个 Vue 对象加载成功了
      //获取学院数据



      this.ruleForm = this.UserInfo.getUserInfo();
      this.$http.get(this.URL.api + "queryallcollage")
        .then(response => {

            this.college = response.data.data;
          },
        );
      this.$http.get(this.URL.api + "QueryMajorAndClazz")
        .then(response => {

            this.classes = response.data.data;


          },
        );
    }
  }
</script>

<style scoped>
  .el-main {
    padding: 0px;
  }

  .H_V_center {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin-left: 20px;
    /*background-color: red;*/
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
